<template>
	<view>
		<custom-tabs type="c1" :value="value" @change="changeIndex" tabCenter :tabSpacing="85">
			<custom-tab-pane :label="item.label" :name="item.key" v-for="item in tabs" :key="item.key">
				<scroll-view scroll-y="true" class="panel-view">
					<view style="margin-bottom:10px">
						<uni-row :gutter="20">
							<uni-col :span="18">
								<uni-datetime-picker v-model="range" type="daterange"
									@maskClick="datePickerClick()" style="height:30px" />
							</uni-col>
						</uni-row>
					</view>
					<view>
						<uni-card>
							<uni-list :border="false">
								<uni-list-item title="走访对象" rightText="孙先生"></uni-list-item>
								<uni-list-item title="人员类别" rightText="孙先生"></uni-list-item>
							</uni-list>
						</uni-card>
						<uni-list :border="true">
							<uni-list-item title="走访时间" rightText="孙先生"></uni-list-item>
							<uni-list-item title="走访地点" rightText="失能"></uni-list-item>
							<uni-list-item title="走访原因" rightText="孙先生"></uni-list-item>
							<uni-row :gutter="20">
								<uni-col :span="12"><uni-list-item title="网格员"
										rightText="失能"></uni-list-item></uni-col>
								<uni-col :span="12"><uni-list-item title="所属网格"
										rightText="失能"></uni-list-item></uni-col>
								<uni-col :span="12"><uni-list-item title="归属社区"
										rightText="失能"></uni-list-item></uni-col>
								<uni-col :span="12"><uni-list-item title="走访类型"
										rightText="失能"></uni-list-item></uni-col>
							</uni-row>
						</uni-list>
					</view>
				</scroll-view>
			</custom-tab-pane>
		</custom-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				tabs: [{
						label: '全部',
						key: 'c1_1'
					},
					{
						label: '待处理',
						key: 'c1_2'
					},
					{
						label: '已完成',
						key: 'c1_3'
					},
				]
			}
		},
		methods: {
			changeIndex(e) {
				console.log('选中:', e)
			},
			datePickerClick(e) {
				console.log('日历事件：', e)
			}
		}
	}
</script>

<style>
	.panel-view {
		height: 100%;
		padding: 12px 18px;
		background-color: #ffffff;
	}
</style>